<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>编辑公司收发货地址表</title>
	<#include "/common/vue_resource.ftl">
	<script type="text/javascript" src="${params.contextPath}/js/areas.js"></script>
	<style>
		.layui-input-block{margin-left:130px;}
		.layui-form-label{width:100px;}
		.area-select{width:150px;}
	</style>
</head>
<body>
<div id="app" v-cloak>
	<div class="ui-form">
		<form class="layui-form" @submit.prevent="submitForm()" method="post">
			<div class="layui-form-item">
				<label class="layui-form-label">地址名称<span class="ui-request">*</span></label>
				<div class="layui-input-block">
					<input type="text" v-model="record.addressName" placeholder="请输入地址名称" class="layui-input"/>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">默认发货地址</label>
				<div class="layui-input-block" style="padding-top:10px;min-height: 26px;">
					<label class="ui-form-label"><input type="radio" v-model="record.sendStatus" value="1"/> 是</label>
					<label class="ui-form-label"><input type="radio" v-model="record.sendStatus" value="2"/> 否</label>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">默认收货地址</label>
				<div class="layui-input-block" style="padding-top:10px;min-height: 26px;">
					<label class="ui-form-label"><input type="radio" v-model="record.receiveStatus" value="1"/> 是</label>
					<label class="ui-form-label"><input type="radio" v-model="record.receiveStatus" value="2"/> 否</label>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">收/发货人姓名<span class="ui-request">*</span></label>
				<div class="layui-input-block">
					<input type="text" v-model="record.name" placeholder="请输入收发货人姓名" class="layui-input"/>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">收/发货人电话<span class="ui-request">*</span></label>
				<div class="layui-input-block">
					<input type="text" v-model="record.phone" placeholder="请输入收货人电话" class="layui-input"/>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">地址<span class="ui-request">*</span></label>
				<div class="layui-input-block">
					<select v-model="record.province" class="layui-input area-select" @change="provChange">
						<option value="">请选择</option>
						<option :value="item.name" v-for="(item, index) in provinces" :key="'prov_' + index">{{item.name}}</option>
					</select>
					<select v-model="record.city" class="layui-input area-select" @change="cityChange">
						<option value="">请选择</option>
						<option :value="item.name" v-for="(item, index) in citys" :key="'prov_' + index">{{item.name}}</option>
					</select>
					<select v-model="record.region" class="layui-input area-select">
						<option value="">请选择</option>
						<option :value="item.name" v-for="(item, index) in regions" :key="'prov_' + index">{{item.name}}</option>
					</select>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">详细地址<span class="ui-request">*</span></label>
				<div class="layui-input-block">
					<input type="text" v-model="record.detailAddress" placeholder="请输入详细地址" class="layui-input"/>
				</div>
			</div>

			<div class="layui-form-item">
				<div class="layui-input-block">
					<input type="submit" value="保存" class="layui-btn" />
				</div>
			</div>
		</form>
	</div>
</div>
<script>
	var app = new Vue({
		el: '#app',
		data: {
			showTypes: false,
			record: {
				id: '${params.id!}',
				addressName: '',
				sendStatus: '2',
				receiveStatus: '2',
				name: '',
				phone: '',
				province: '',
				city: '',
				region: '',
				detailAddress: '',
			},
			provinces: [],
			citys: [],
			regions: [],
		},
		mounted: function () {
			this.init();
			this.loadData();
		},
		methods: {
			init:function(){
				var that = this;
				/*laydate.render({elem: '#beginDate', type:'datetime', done:function (value) {
						that.record.beginDate = value;
					}});*/

				this.provinces = areas || [];
			},
			provChange: function () {
				var provName = this.record.province;
				this.record.city = "";
				this.record.region = "";
				this.citys = [];
				this.regions = [];
				if (!provName) {
					return;
				}
				for (var i = 0; i < this.provinces.length; i ++) {
					var item = this.provinces[i];
					if (item.name != provName) {
						continue;
					}
					this.citys = item.children;
				}
			},
			cityChange: function () {
				var cityName = this.record.city;
				this.record.region = "";
				this.regions = [];
				if (!cityName) {
					return;
				}
				for (var i = 0; i < this.citys.length; i ++) {
					var item = this.citys[i];
					if (item.name != cityName) {
						continue;
					}
					this.regions = item.children;
				}
			},
			loadData: function () {
				if (!'${params.id!}') {
					return;
				}
				var that = this;
				$.http.post('${params.contextPath}/web/omsCompanyAddress/query.json', {id: '${params.id!}'}).then(function (data) {
					if (!data.success) {
						$.message(data.message);
						return;
					}
					var record = data.data;
					for (var key in  that.record) {
						that.record[key] = record[key];
					}

					var provName = record.province;
					for (var i = 0; i < that.provinces.length; i ++) {
						var item = that.provinces[i];
						if (item.name != provName) {
							continue;
						}
						that.citys = item.children;
					}
					var cityName = record.city;
					for (var i = 0; i < that.citys.length; i ++) {
						var item = that.citys[i];
						if (item.name != cityName) {
							continue;
						}
						that.regions = item.children;
					}
				});
			},
			submitForm: function () {
				$.http.post('${params.contextPath}/web/omsCompanyAddress/<#if (params.id)??>modify<#else>save</#if>.json', this.record).then(function (data) {
					if (!data.success) {
						$.message(data.message);
						return;
					}
					var alt = layer.alert(data.message || "操作成功", function () {
						parent.app.loadData();
						parent.layer.closeAll();
						layer.close(alt);
					});
				});
			},
		}
	});
</script>
</body>

</html>
